<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    111

    <div class="a" id="b">3333333333</div>
    <div class="a">3333333333</div>

    <script>

        function GetEle(ele) {
            // 获取所有的元素  伪数组
            this.eles = document.querySelectorAll(ele);
        }


        // $符号就是实例化对象   省略每一次的new
        function $(ele) {
            return new GetEle(ele)
        }


        GetEle.prototype.click = function (cb) {
            this.eles.forEach(v => {
                v.addEventListener('click', cb)
            })
        }

        // GetEle.prototype.on = function () {
        //     const args = arguments;   // 变量把这个实参存起来
        //     if (arguments.length > 2) {
        //         // 三个参数
        //         this.eles.forEach(v => {
        //             v.addEventListener(args[0], function (e) {
        //                 const target = e.target;
        //                 if (args[1].includes('.')) {   // 条件合并
        //                     if (target.className === args[1].replace('.', '')) {
        //                         // 调用这个函数
        //                         args[2]();
        //                     }
        //                 }
        //                 else if (args[1].includes('#')) {  // 条件合并
        //                     if (target.id === args[1].replace('#', '')) {
        //                         // 调用这个函数
        //                         args[2]();
        //                     }
        //                 }
        //                 else {
        //                     if (target.tagName === args[1].toUpperCase()) {
        //                         // 调用这个函数
        //                         args[2]();
        //                     }
        //                 }

        //             })
        //         })
        //     } else {

        //         // 只有两个参数就直接绑定事件
        //         this.eles.forEach(v => {
        //             v.addEventListener(arguments[0], arguments[1])
        //         })
        //     }

        // }





        GetEle.prototype.on = function () {
            const args = arguments;   // 变量把这个实参存起来
            if (arguments.length > 2) {
                // 三个参数
                this.eles.forEach(v => {
                    v.addEventListener(args[0], function (e) {
                        const target = e.target;
                        // 第二个参数不确定的
                        if (typeof args[1] === 'object') {   // 参数是对象(标签对象)
                            if (target === args[1]) {
                                args[2]()
                            }
                        } else {    // 参数就是字符串
                            const oPs = v.querySelectorAll(args[1]);
                            oPs.forEach(vv => {
                                if (target === vv) {
                                    args[2]()
                                }
                            })
                        }
                    })
                })
            } else {

                // 只有两个参数就直接绑定事件
                this.eles.forEach(v => {
                    v.addEventListener(arguments[0], arguments[1])
                })
            }

        }






        // $('body').click(function () {
        //     console.log(1)
        // })
        // $('body').click(function () {
        //     console.log(2)
        // })

        // $('body').on('click', function () { })

        // 事件委托
        //   事件绑定在body身上   但是由.a触发


        const oDiv = document.querySelector('div');
        console.log(typeof oDiv);
        $('body').on('click', oDiv, function () {
            console.log(111111)
        })

        $('body').on('click', '#b', function () {
            console.log(3333333333333)
        })




    </script>

</body>

</html>